<template>
  <div id="toolbar">
    <!-- <Icon type="ios-checkbox-outline" /><Icon type="ios-clock" /> -->
    <i class="command ivu-icon ivu-icon-md-add" title="测试"></i>
    <i class="command ivu-icon ivu-icon-ios-checkbox-outline" title="测试"></i>
    <i class="command ivu-icon ivu-icon-ios-clock" title="测试"></i>
    <i data-command="undo" class="command iconfont icon-undo" title="撤销" />
    <i data-command="redo" class="command iconfont icon-redo" title="重做" />
    <span class="separator" />
    <i data-command="copy" class="command iconfont icon-copy-o" title="复制" />
    
    <i
      data-command="paste"
      class="command iconfont icon-paster-o"
      title="粘贴"
    />
    <i
      data-command="delete"
      class="command iconfont icon-delete-o"
      title="删除"
    />
    <span class="separator" />
    <i
      data-command="zoomIn"
      class="command iconfont icon-zoom-in-o"
      title="放大"
    />
    <i
      data-command="zoomOut"
      class="command iconfont icon-zoom-out-o"
      title="缩小"
    />
    <i
      data-command="autoZoom"
      class="command iconfont icon-fit"
      title="适应画布"
    />
    <i
      data-command="resetZoom"
      class="command iconfont icon-actual-size-o"
      title="实际尺寸"
    />
    <!-- <span class="separator" />
    <i
      data-command="toBack"
      class="command iconfont icon-to-back"
      title="层级后置"
    />
    <i
      data-command="toFront"
      class="command iconfont icon-to-front"
      title="层级前置"
    />
    <span class="separator" />
    <i
      data-command="multiSelect"
      class="command iconfont icon-select"
      title="多选"
    />
    <i
      data-command="addGroup"
      class="command iconfont icon-group"
      title="成组"
    />
    <i
      data-command="unGroup"
      class="command iconfont icon-ungroup"
      title="解组"
    /> -->
    <span class="separator" />
    <el-radio-group v-model="lineType" size="mini">
      <el-radio-button label="flow-smooth">圆线</el-radio-button>
      <el-radio-button label="flow-polyline-round">折线</el-radio-button>
      <el-radio-button label="line">虚线</el-radio-button>
      <el-radio-button label="flow-edge">直线</el-radio-button>
    </el-radio-group>
    <span class="separator" />
    <el-button @click="$emit('save')" class="el-button--default el-button--mini"
      >保存</el-button>

    <el-button @click="$emit('save')" class="el-button--default el-button--mini"
      >运行</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "toolbar",
      lineType: "flow-smooth"
    };
  },
  watch: {
    lineType(value) {
      this.$emit("change-eage", value);
    }
  }
};
</script>
<style lang="scss">
#toolbar {
  padding: 8px 0px;
  width: 100%;
  border: 1px solid #e9e9e9;
  height: 42px;
  z-index: 3;
  box-shadow: 0px 8px 12px 0px rgba(0, 52, 107, 0.04);
  position: absolute;
  text-align: left;
}
#toolbar *::before {
  font-size: 16px !important;
}
#toolbar .disable {
  color: rgba(0, 0, 0, 0.25);
}
#toolbar .icon-select.disable {
  background: #eeeeee;
}
#toolbar .separator {
  margin: 4px;
  border-left: 1px solid #e9e9e9;
}
#toolbar .command {
  width: 27px;
  height: 27px;
  margin: 0px 6px;
  border-radius: 2px;
  padding-left: 4px;
  display: inline-block;
  border: 1px solid rgba(2, 2, 2, 0);
}
#toolbar .command:nth-of-type(1) {
  margin-left: 24px;
}
#toolbar .command:hover {
  cursor: pointer;
  border: 1px solid #e9e9e9;
}
#toolbar .disable:hover {
  cursor: default;
  border: 1px solid rgba(2, 2, 2, 0);
}
#toolbar {
  .el-radio-group {
    font-size: 0 !important;
  }
}
</style>


